<template lang="">
    <div>
        <el-dialog :before-close="cancel" center :title="isAdd?'添加管理员':'修改管理员'" :visible.sync="isShow">
  <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="所属角色" prop="roleid">
      <el-select v-model="userForm.roleid" placeholder="请选择">
        <el-option 
           v-for="item in rolelist" 
           :key="item.id" 
           :value="item.id" 
           :label="item.rolename"></el-option>
      </el-select>
    </el-form-item>
      <el-form-item label="用户名称" prop="username">
    <el-input v-model="userForm.username"></el-input>
     </el-form-item>
    <el-form-item label="密码">
    <el-input v-model="userForm.password"></el-input>
  </el-form-item>
     <el-form-item  label="状态">
   <el-switch
    v-model="userForm.status"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-value="1"
    :inactive-value="2">
  </el-switch>
</el-form-item>
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="comfirm">确 定</el-button>
  </div>
</el-dialog>
    </div>
</template>
<script>
import { userAdd, userInfo, userEdit } from '../../request/api'
import { mapActions, mapGetters } from 'vuex';
export default {
  props: ['isShow', 'isAdd'],
  computed: {
    ...mapGetters({
      rolelist: "role/getRoleList",
    }),
  },
  data() {
    return {
      rules: {
        username: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        roleid: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
      },
      userForm: {
        roleid: '',//角色编号
        username: '',//管理员名称
        password: '',//密码
        status: 1,//状态  1正常2禁用
      },
    };
  },
  mounted() {
    // console.log(this.rolelist,'rolelist');
    if (this.rolelist.length == 0) {
      this.getRole()
    }
  },

  methods: {
    ...mapActions({
      getUser: 'user/changeUserAction',
      getRole: "role/changeRoleAction",
      getConut: 'user/getCountAction'
    }),
    // 点击取消
    cancel() {
      this.$emit('cancel', false)
      this.reset()
    },
    // 封装一个重置事件
    reset() {
      this.userForm = {
        roleid: '',//角色编号
        username: '',//管理员名称
        password: '',//密码
        status: 1,//状态  1正常2禁用
      };
      // 清空表单验证
      this.$refs.userForm.resetFields();
    },
    //封装一个函数用来数据回显
    lookup(uid) {
      //调用一条数据查询
      userInfo({
        uid,
      }).then((res) => {
        console.log(res, "一条数据查询响应");
        if (res.code == 200) {
          this.userForm = res.list;
          this.userForm.uid = uid;
          // 注意： 为空则不做修改！！！
          this.userForm.password = "";
        }
      });
    },
    // 点击确定
    comfirm() {
      this.$refs.userForm.validate((flag) => {
        console.log(flag);
        if (flag) {
          //通过属性isAdd去区分 区分是添加还是编辑
          if (this.isAdd) {
            userAdd(this.userForm).then((res) => {
              console.log(res, '管理员添加');
              if (res.code == 200) {
                // 添加成功
                this.$message.success(res.msg)
                // 关闭弹框
                this.cancel();
                // 重新回去列表
                this.getUser();
                // 重新获取总条数
                this.getConut()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            userEdit(this.userForm).then((res) => {
              console.log(res, '管理员添加');
              if (res.code == 200) {
                // 添加成功
                this.$message.success(res.msg)
                // 关闭弹框
                this.cancel();
                // 重新回去列表
                this.getUser();
                // 重新获取总条数
                this.getConut()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      });
    },
  },
};
</script>
<style lang="">
    
</style>